<template>
  <div class="container">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item label="角色名称">
            <a-input allow-clear v-model="state.sd.roleName" placeholder="请输入角色名称" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-space>
            <a-button type="primary" @click="searchRole">
              <template #icon><icon-search /></template>查询
            </a-button>
            <a-button type="primary" @click="addRole">
              <template #icon><icon-plus-circle /></template>添加
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>

    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.roleObj.list">
      <template #columns>
        <a-table-column title="角色名称" data-index="roleName"></a-table-column>
        <a-table-column title="操作" width="350">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="small" @click="editRole(record.id)"><template #icon><icon-edit /></template>修改</a-button>
              <a-popconfirm content="确认删除吗?" @ok="deleteRole(record.id)">
                <a-button type="primary" status="danger" size="small"><template #icon><icon-delete /></template>删除</a-button>
              </a-popconfirm>
              <a-button type="primary" size="small" @click="roleSetUser(record.id)"><template #icon><icon-user /></template>用户设置</a-button>
              <a-button type="primary" size="small" @click="roleSetPermission(record.id)"><template #icon><icon-settings /></template>权限设置</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-pagination class="mt10" show-total :total="state.roleObj.total" @change="loadRole" @page-size-change="loadRole" v-model:current="state.sd.pageNum" v-model:page-size="state.sd.pageSize"></a-pagination>

    <a-modal :title="state.popupTitle" v-model:visible="state.entityDetailVisible" :footer="false">
      <RoleDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible" :entityId="state.popupEntityId"></RoleDetail>
    </a-modal>
    <a-modal :title="state.popupTitle" v-model:visible="state.rolePermissionVisible" :footer="false">
      <RolePermission v-if="state.rolePermissionVisible" v-model="state.rolePermissionVisible" :roleId="state.popupEntityId"></RolePermission>
    </a-modal>
    <a-modal :title="state.popupTitle" v-model:visible="state.roleUserVisible" :footer="false">
      <RoleUser v-if="state.roleUserVisible" v-model="state.roleUserVisible" :roleId="state.popupEntityId"></RoleUser>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import mittBus from "@/utils/route-listener"
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
// 引入组件
const RoleDetail = defineAsyncComponent(() => import('@/views/sys/role/roleDetail.vue'));
const RolePermission = defineAsyncComponent(() => import('@/views/sys/role/rolePermission.vue'));
const RoleUser = defineAsyncComponent(() => import('@/views/sys/role/roleUser.vue'));

const state = reactive({
  sd: {
    roleName : '',
    pageNum: 1,
    pageSize: 10
  },
  roleObj: {},

  entityDetailVisible : false,
  popupTitle : '',
  popupEntityId : 0,

  roleUserVisible : false,
  rolePermissionVisible : false,
})

const searchRole = ()=>{
  state.sd.pageNum = 1;
  loadRole();
}
const loadRole = ()=>{
  axios.post('/sys/role/pagerole', state.sd).then(res => {
    const { data } = res
    state.roleObj = data
  })
}
const addRole = ()=>{
  state.popupEntityId = 0;
  state.popupTitle= "新增角色"
  state.entityDetailVisible= true
}
const editRole = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "修改角色"
  state.entityDetailVisible= true
}
const roleSetUser = (id)=>{
  state.popupEntityId= id;
  state.popupTitle= "角色用户"
  state.roleUserVisible= true
}
const roleSetPermission = (id)=>{
  state.popupEntityId= id;
  state.popupTitle= "权限设置"
  state.rolePermissionVisible= true
}
const deleteRole = (id)=>{
  axios.post('/sys/role/deleterole', {id : id}).then(res => {
    const { code, msg } = res
    if(code === '200') {
      Message.success(msg)
      loadRole();
    }
  })
}
onMounted(()=>{
  loadRole();
  mittBus.on("roleadd", ()=>{
    state.sd.pageNum = 1;
    loadRole();
  })
  mittBus.on("roleedit", ()=>{
    loadRole();
  })
})
onUnmounted(()=>{
  mittBus.off("roleadd", ()=>{})
  mittBus.off("roleedit",()=>{})
})
</script>

<style scoped>

</style>
